<template>
  <van-nav-bar title="分类" fixed placeholder />

  <van-row>
    <van-col span="6">
      <van-sidebar v-model="active" @change="leftMenuChange" class="leftList">
        <van-sidebar-item v-for="item in leftArr" :key="item.id" :title="item.title" />
      </van-sidebar>
    </van-col>

    <!--滚动--核心--子元素超出父容器的高度 -->
    <!-- 父容器高度定了，子元素就会在父容器中滚动 -->
    <!-- 刚刚没有做任何的设置，，app 在滚动 -->
    <van-col>
      <div class="rightList">右侧列表</div>
    </van-col>
  </van-row>
</template>

<script setup>
import { ref } from "vue";
const active = ref(0);

let leftArr = ref([
  { id: 1, title: "家电" },
  { id: 2, title: "玩具" },
  { id: 3, title: "衣服" },
  { id: 4, title: "手机" },
  { id: 5, title: "手机" },
  { id: 6, title: "手机" },
  { id: 7, title: "手机" },
  { id: 8, title: "手机" },
  { id: 9, title: "手机" },
  { id: 10, title: "手机" },
  { id: 11, title: "冰箱" },
]);

function leftMenuChange(index) {
  //indez 下标
  console.log(index);
  console.log(leftArr.value[index].title);
}
</script>

<style scoped>
.leftList,
.rightList {
  height: calc(100vh - 96px);
}
</style>
